<template>
	<view class="container">
		<view class="logo">
			<image class="img" src="/static/logo.png" mode="scaleToFill" />
		</view>
		<uni-forms ref="customForm" :modelValue="customFormData" :rules="rules" err-show-type="toast"
			label-position="top">
			<uni-forms-item label="手机号" name="phone">
				<uni-easyinput v-model="customFormData.phone" placeholder="请输入手机号" />
				<button class="button" size="mini" type="default">获取</button>
			</uni-forms-item>
			<uni-forms-item label="验证码" name="code">
				<uni-easyinput v-model="customFormData.code" placeholder="请输入验证码" />
			</uni-forms-item>
			<button type="submit" :loading="loading" @click="login('customForm')">提交</button>
			<button open-type="getPhoneNumber" @getphonenumber="onGetphonenumber">
				手机号一键登录
			</button>
		</uni-forms>
	</view>
</template>

<script setup lang="ts">
	import type { UniFormsRules } from '@uni-helper/uni-ui-types'
	import { ref } from 'vue'
	import { wxlogin } from '@/plugins/request'

	const loading = ref<boolean>(false);
	const customFormData = ref({ phone: '13916433685', code: '' })
	let customForm = ref()
	const rules : UniFormsRules = {
		phone: {
			label: '手机号',
			rules: [
				{
					required: true,
					errorMessage: '请输入手机号',
				},
				{
					format: 'number',
					errorMessage: '只能输入数字',
				},
				{
					minimum: 11,
					errorMessage: '请输入正确的手机号',
				},
			],
		},
		code: {
			label: '验证码',
			rules: [
				{
					required: true,
					errorMessage: '请输入验证码',
				},
				{
					format: 'number',
					errorMessage: '只能输入数字',
				},
				{
					minimum: 6,
					errorMessage: '请输入正确的验证码',
				},
			],
		},
	}

	const onGetphonenumber = (res : any) => {
		console.log('---------res', res)
		const params = {
			code: res.detail.code,
			encryptedData: res.detail.encryptedData,
			iv: res.detail.iv
		};
		wxlogin(params);
	}

	const login = async (t ?: any) => {
		// const res = await customForm.value.validate()
		// console.log('----res', res, customFormData.value)
		// if (!res) {
		// 	return
		// }
		loading.value = true;
		console.log('======customFormData.value', customFormData.value)
		const res = await uni.login({
			provider: 'weixin',
		});
		const userInfo = await uni.getUserInfo({
			provider: 'weixin'
		});
		const params = {
			code: res.code,
			encryptedData: userInfo.encryptedData,
			iv: userInfo.iv,
			...userInfo.userInfo,
			phone: customFormData.value.phone
		};
		const data = await wxlogin(params);
		console.log('======res', data);
		loading.value = false;
		// wxlogin(res)
		// uni.login({
		// 	provider: 'weixin',
		// 	success: (loginRes) => {
		// 		uni.getUserInfo({
		// 			provider: 'weixin',
		// 			success: (infoRes) => {
		// 				console.log('------infoRes', infoRes)
		// 				// 获取encryptedData和iv
		// 				const encryptedData = infoRes.userInfo.encryptedData;
		// 				const iv = infoRes.userInfo.iv;
		// 				// 发送到后端解密
		// 				uni.request({
		// 					url: 'YOUR_BACKEND_ENDPOINT', // 替换为你的后端解密接口
		// 					method: 'POST',
		// 					data: {
		// 						encryptedData: encryptedData,
		// 						iv: iv,
		// 						code: loginRes.code, // 登录凭证
		// 					},
		// 					success: (res) => {
		// 						if (res.statusCode === 200 && res.data.phoneNumber) {
		// 							console.log('获取到用户手机号:', res.data.phoneNumber);
		// 						} else {
		// 							console.error('获取手机号失败:', res.data);
		// 						}
		// 					},
		// 					fail: (error) => {
		// 						console.error('请求失败:', error);
		// 					},
		// 				});
		// 			},
		// 			fail: (error) => {
		// 				console.error('获取用户信息失败:', error);
		// 			},
		// 		});
		// 	},
		// 	fail: (error) => {
		// 		console.error('登录失败:', error);
		// 	},
		// });
		// uni.getUserProfile({
		// 	desc: '获取个人信息',
		// 	success: (res) => {
		// 		const { iv, encryptedData, userInfo } = res;
		// 		console.log('----------------', res)
		// 		uni.login({
		// 			success: (val) => {
		// 				const { code } = val;
		// 				console.log('------val', code)
		// 				// request.post('auth/wechat/login', { code }).then((res) => {
		// 				// 	console.log('-----------res', res)
		// 				// })
		// 				// uni.showLoading({ title: '登录中', mask: true });
		// 			},
		// 			fail: (err) => {
		// 				uni.showToast({ title: '登陆失败', icon: 'none', duration: 1500, mask: true });
		// 			}
		// 		});
		// 	},
		// 	fail: (err) => {
		// 		console.log(err);
		// 		uni.showToast({
		// 			title: '登陆失败',
		// 			icon: 'none',
		// 			duration: 1500,
		// 			mask: true
		// 		});
		// 	}
		// })
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 0 40rpx;
	}

	.logo {
		text-align: center;
		margin: 20px 0;

		.img {
			width: 80px;
			height: 80px;
			border-radius: 50%;
		}
	}
</style>